const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    // 配置loaders
    rules: [
      {
        test: /\.less$/,
        // 使用多个loader用use处理
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片资源
        test: /\.(png|jpg|gif)$/,
        /* 使用dependency配置可以显示图片，但是下面url-loader的配置都没生效，暂时不知道什么问题？*/
        // dependency: {
        //   not: ['url']
        // },
        // 使用一个loader
        loader: 'url-loader', // 注意：url-loader依赖file-loader，所以这两个包都要下载
        options: {
          // 图片大小小于limit值就会base64处理
          // 优点：减少服务器请求次数
          // 缺点：图片体积会变大（文件请求速度更慢）
          limit: 10 * 1024,
          outputPath: 'img',
          name: '[name].[hash:10].[ext]',
          // css-loader引入图片采用commonjs，url-loader默认是es module，所以要将url-loader的esModule关闭
          esModule: false
        },
        // css-loader版本大于6时，
        // 对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由css-loader解析引入）
        // 解决：css-loader版本>6时设置type: 'javascript/auto'
        /*
        * 官方解释：
        * 当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前
        *  asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决
        * */
        type: 'javascript/auto'
      },
      {
        test: /\.html$/,
        // 处理html中img标签引入的图片（负责引入img，从而被url-loader处理）
        loader: 'html-loader'
      }
    ]
  },
  // 配置插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html'
    })
  ],
  mode: 'development'
}
